<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Incremental Rendering</title>
    <script src="../dist/quark-renderer.js"></script>
</head>
<body style="margin:0px;">
    <canvas id="main" width="1000px" height="600px" style="width:1000px;height:600px;"></canvas>
    <script type="text/javascript">
        var qr = QuarkRenderer.init(document.getElementById('main'));

        qr.add(new QuarkRenderer.Rect({
            shape: {
                x: 0,
                y: 0,
                width: qr.getWidth(),
                height: qr.getHeight()
            },
            style: {
                fill: 'red'
            }
        }));

        var countText = new QuarkRenderer.Text({
            zlevel: 1,
            style: {
                text: 10000,
                x: 10,
                y: 10,
                textFont: '40px sans-serif',
                textFill: '#fff',
                textStroke: '#000',
                textStrokeWidth: 2
            }
        });
        qr.add(countText);

        var group = new QuarkRenderer.Group();
        qr.add(group);
        for (var i = 0; i < 10000; i++) {
            var circleShape = new QuarkRenderer.Circle({
                shape: {
                    r: 5 + Math.random() * 5
                },
                style: {
                    fill: '#121',
                    blend: 'lighter'
                },
                incremental: true,
                position: [Math.random() * qr.getWidth(), Math.random() * qr.getHeight()]
            });
            group.add(circleShape);
        }

        countText.dirty();
    </script>
</body>
</html>